<template>
    <div class="top">
        <div class="search">
            <a href="/">
                <img src="../../src/assets/images/good.jpg" alt="" class="search-icon">
            </a>
        </div>
        <ul class="menu">
            <a href="/">
                <li>首页</li> 
            </a>
            <a href="/works">
                <li>作品集</li>
            </a>
            <a href="/top">
                <li>TOP榜单</li>
            </a>
            <a href="/branchs">
                <li>设计组织</li>
            </a>
            <li>...</li>
        </ul>
        <div class="clear"></div>
        <div>
        <el-input placeholder="请输入搜索内容" v-model="searchInfo.keyword" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="searchContent"></el-button>
        </el-input>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchInfo: {
                keyword: '',
                page: 1,
                size: 10000,
            },
        }
    },
    methods: {
        searchContent() {
            this.$router.push({
                path: '/works'
            })
            this.$http.get(this.$api.topSearch, {params: this.searchInfo})
            .then(res => {
                console.log(res);
                if(res.data.status === 20000) {
                    this.$emit('searchItem', res.data.data.records)
                }else {
                    this.$message.error("获取数据失败")
                }
            }) 
            .catch(error => {
                console.log(error);
            })
        }
    },
}
</script>

<style lang="less" scoped>
.top{
    display: flex;
    background: black;
    align-items: center;
    justify-content: space-around;
    .search {
        display: flex;
        align-items: center;
        justify-content: center;
        .search-icon {
            width: 107px;
            height: 60px;
        }
    }
    .search:hover {
        background: #3f3f3f;
    }
    .menu {
        position: none !important;
        list-style: none;
        height: 100%;
        li {
            float: left;
            cursor: pointer;
            font-size: 13px;
            min-width: 64px;
            line-height: 56px;
            margin-right: 25px;
            color: white;
        }
        li:hover {
            background: #3f3f3f;
            height: 100%;
        }
    }
    .clear {
        clear: both;
    }
}
.top /deep/ .el-input-group--append .el-input__inner, .el-input-group__prepend {
     border-right: 1px solid;
    background: #3f3f3f;
}
.top /deep/ .el-input__inner {
    border-radius: 0;
    border-color: #3f3f3f;
}
.top /deep/ .el-input-group__append, .el-input-group__prepend {
    background: black;
    border-color: #3f3f3f;
}
.top /deep/ .el-input-group__append, .el-input-group__prepend:hover {
    background: #3f3f3f;
}
</style>